<template>
    <div class="films-box">
        <div class="list-name">
            <span>热门电影</span>
        </div>
        <FilmItem class="content-list" :list="products" />
        <input type="button" value="加载下一页" @click="loadNextPage()" />
    </div>
</template>

<script>
import FilmItem from "../components/FilmItem";
import axios from "axios";
export default {
    components: {
        FilmItem
    },
    data() {
        return {
            products: [],
            params: {
                size: 9,
                no: 1
                // typeId:""
            },
            dataFlag: true
        };
    },
    methods: {
        loadFilmList() {
            //这里的测试数据，根目录是相对于index页面的
            let p = axios.get("/datas/films.json");

            p.then(res => {
                // console.log(res);
                if (res.statusText != "OK") {
                    return Promise.reject("服务器出现故障");
                }
                if (!res.data.resultState) {
                    return Promise.reject(res.data.msg);
                }
                this.products = res.data.result;
            }).catch(error => {
                console.log(error);
                console.log("请求失败====》", error.message);
                // console.log(this);
                this.$showTip("网络连接失败，请稍后重试");
            });
        },
        loadFilmList1() {
            var baseUrl =
                process.env.NODE_ENV === "production"
                    ? "http://127.0.0.1:80"
                    : "/api";
            axios
                .get(baseUrl + "/filmApi/loadFilms.php")
                // .then((res)=>{
                .then(({ statusText, data: { resultState, result, msg } }) => {
                    // console.log(res);
                    if (statusText != "OK") {
                        return Promise.reject(new Error("服务出现故障"));
                    }
                    if (!resultState) {
                        // return Promise.reject(new Error("请求配置错误"));
                        return Promise.reject(new Error(msg));
                    }
                    this.products = result;
                })
                .catch(error => {
                    // console.log(error.message);
                    // console.log(111);
                    console.log("------->请求失败:", error); // 开发者查看
                    this.$showTip("网络连接失败，请稍后重试");
                });
        },
        loadFilmList2() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            }
            // var baseUrl =
            //     process.env.NODE_ENV === "production"
            //         ? "http://127.0.0.1:80"
            //         : "/api";
            axios
                .get("/filmApi/loadFilms.php", {
                    baseURL:
                        process.env.NODE_ENV === "production"
                            ? "http://127.0.0.1:80"
                            : "/api",
                    params: this.params
                })
                // .then((res)=>{
                .then(({ statusText, data: { resultState, result, msg } }) => {
                    // console.log(res);
                    if (statusText != "OK") {
                        return Promise.reject(new Error("服务出现故障"));
                    }
                    if (!resultState) {
                        // return Promise.reject(new Error("请求配置错误"));
                        return Promise.reject(new Error(msg));
                    }
                    if (result.length < this.params.size) {
                        this.dataFlag = false;
                    }
                    this.products = this.products.concat(result);
                })
                .catch(error => {
                    // console.log(error.message);
                    // console.log(111);
                    console.log("------->请求失败:", error); // 开发者查看
                    this.$showTip("网络连接失败，请稍后重试");
                });
        },
        loadFilmList3() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            }
            // var baseUrl =
            //     process.env.NODE_ENV === "production"
            //         ? "http://127.0.0.1:80"
            //         : "/api";
            this.$api
                .loadFilms(this.params)
                .then(data => {
                    // console.log(data);
                    // if (data.length < this.params.size) {
                    //     this.dataFlag = false;
                    // }
                    if(data.length==0){
                        this.dataFlag = false;
                    }
                    // console.log(data);
                    this.products = this.products.concat(data);
                })
                .catch(this.$error);
        },
        loadNextPage() {
            if (!this.dataFlag) {
                this.$showTip("没有更多数据了");
                return;
            }
            this.params.no += 1;
            this.loadFilmList3();
        }
    },
    mounted() {
        // this.loadFilmList();
        // this.loadFilmList1();
        // this.loadFilmList2();
        // this.params.typeId = this.$route.query.typeId;
        if (this.$route.query.typeId) {
            this.params.typeId = this.$route.query.typeId;
        }
        if (this.$route.query.wk) {
            this.params.seach = this.$route.query.wk;
        }
        this.loadFilmList3();
    },
    watch:{
        "$route.query.wk":function(nv){
            this.products=[];
            this.params.seach = nv;
            this.loadFilmList3();
        }
    }
};
</script>

<style lang="less" scoped>
.films-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.content-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    > ::v-deep * {
        margin-top: 0.2rem;
    }
}
</style>